<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/swiper.min.css">
</head>
<style>
    *{
        margin: 0px;
        padding: 0px;
        list-style: none;
    }
    html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }
    .bbq{
            background: #000;
            width: 100%;
            display: flex;
            list-style: none;
            height: 50px;
        }
        .bbq li {
            display: flex;
            color: aliceblue;
            justify-content: center;
            align-items: center;
             }
        .bbq li:nth-child(1){
            width: 10%;
        }
        .bbq li:nth-child(1) img{
            width: 16px;
        }
        .bbq li:nth-child(2){
            width: 15%;
        }
        .bbq li:nth-child(2) img{
            width: 35px;
        }
        .bbq li:nth-child(3){
            width: 50%;
        }
        .bbq li:nth-child(4){
            width: 25%;
            background: rgb(255, 0, 0);
        }
        .sousuo{
            width: 100%;
            height: 44px;
            background-color: red;
            color: aliceblue;
            display: flex;
            align-items: center;
            position: sticky;
            top: 0px;
            z-index: 99;
        }
        .btn,.denglu{
            width: 50px;
            height: 44px;
        }
        .sou{
            flex: 1;
            height: 30px;
            background-color: #fff;
            border-radius: 15px;
        }
        .denglu{
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .btn span{
     margin: 14px 0 0 15px;
    width: 20px;
    height: 18px;
    display: block;
    background: url() no-repeat;
    background-size: 100% 100%;
        }
        .jd{
            width: 20px;
    height: 15px;
    background: url() no-repeat;
    background-size: 20px 15px;
    margin: 8px 8px 0 15px;
    position: relative;
    z-index: 1;
    float: left;
        }
        .fangda{
            display: block;
    width: 18px;
    height: 15px;
    background: url(https://st.360buyimg.com/so/images/search/jd-sprites.png?__inline=) no-repeat;
    background-position: -80px 0;
    background-size: 200px;
    margin: 8px 0 0 8px;
    position: relative;
    z-index: 1;
    float: left;
        }
        .jd::after{
            content: "";
    position: absolute;
    border-right: 1px solid #ddd;
    top: 0px;
    left: 26px;
    height: 16px
        }
    .swiper-container {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
    .lunbox img{
        width: 100%;
    }
    .nav{
        width: 100%;
        height: 190px;
        text-align: center;
        font-size: 6px;
        display: flex;
        flex-wrap: wrap;
    }
    .nav li{     
        width: 20%;
    }
    .nav li img{
        height: 80%;
    }
    a{
        text-decoration: none;
    }
    span{
        display: block;
        color: #666;
    }
    img{
        width: 100%;
    }
    .dibu{
            width: 100%;
            height: 50px;
            display: flex;
            position: absolute;
            bottom: 0px;
            z-index: 99;
        }
        .dibu li{
            width: 20%;
        }
        .dibu li img{
            width: 100%;
        }
</style>
<body>
  <ul class="bbq">
    <li><img src="./images/cha.png" alt=""></li>
    <li><img src="./images/图标.png" alt=""></li>
    <li>打开京东APP <br>购物实惠又轻松</li>
    <li>立即打开</li>
</ul>
<div class="sousuo">
  <div class="btn">
      <span></span>
  </div>
  <div class="sou">
      <div class="jd">

      </div>
      <div class="xian">

      </div>
      <div class="fangda">

      </div>
  </div>
  <div class="denglu">
      登录
  </div>
 </div>
<div class="lunbox">
    <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="./images/21.jpg" alt=""></div>
          <div class="swiper-slide"><img src="./images/22.jpg" alt=""></div>
          <div class="swiper-slide"><img src="./images/23.jpg" alt=""></div>
          <div class="swiper-slide"><img src="./images/24.jpg" alt=""></div>
          <div class="swiper-slide"><img src="./images/25.jpg" alt=""></div>
          <div class="swiper-slide"><img src="./images/26.jpg" alt=""></div>
          <div class="swiper-slide"><img src="./images/27.jpg" alt=""></div>
          <div class="swiper-slide"><img src="./images/28.jpg" alt=""></div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
      </div>
    
      <!-- Swiper JS -->
      <script src="./js/swiper.min.js"></script>
    
      <!-- Initialize Swiper -->
      <script>
        var swiper = new Swiper('.swiper-container', {
            loop : true,
            pagination: {
            el: '.swiper-pagination',
            dynamicBullets: true,
          },
        });
      </script>
</div>
<div>
    <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><!-- 导航条 -->
            <ul class="nav">
                <li><a href="javascript:;"><img src="./images/1.png" alt=""><span>京东超市</span></a></li>
                <li><a href="javascript:;"><img src="./images/2.png" alt=""><span>数码电器</span></a></li>
                <li><a href="javascript:;"><img src="./images/3.png" alt=""><span>京东服饰</span></a></li>
                <li><a href="javascript:;"><img src="./images/4.png" alt=""><span>京东生鲜</span></a></li>
                <li><a href="javascript:;"><img src="./images/5.png" alt=""><span>京东到家</span></a></li>
                <li><a href="javascript:;"><img src="./images/6.png" alt=""><span>充值缴费</span></a></li>
                <li><a href="javascript:;"><img src="./images/7.png" alt=""><span>9.9元拼</span></a></li>
                <li><a href="javascript:;"><img src="./images/8.png" alt=""><span>领劵</span></a></li>
                <li><a href="javascript:;"><img src="./images/9.png" alt=""><span>领金贴</span></a></li>
                <li><a href="javascript:;"><img src="./images/10.png" alt=""><span>PLUS会员</span></a></li>
            </ul></div>
          <div class="swiper-slide"><!-- 导航条 -->
            <ul class="nav">
                <li><a href="javascript:;"><img src="./images/11.png" alt=""><span>京东国际</span></a></li>
                <li><a href="javascript:;"><img src="./images/12.png" alt=""><span>京东拍卖</span></a></li>
                <li><a href="javascript:;"><img src="./images/13.png" alt=""><span>唯品会</span></a></li>
                <li><a href="javascript:;"><img src="./images/14.png" alt=""><span>玩3C</span></a></li>
                <li><a href="javascript:;"><img src="./images/15.png" alt=""><span>沃尔玛</span></a></li>
                <li><a href="javascript:;"><img src="./images/16.png" alt=""><span>美妆馆</span></a></li>
                <li><a href="javascript:;"><img src="./images/17.png" alt=""><span>京东旅行</span></a></li>
                <li><a href="javascript:;"><img src="./images/18.png" alt=""><span>拍拍二手</span></a></li>
                <li><a href="javascript:;"><img src="./images/19.png" alt=""><span>物流查询</span></a></li>
                <li><a href="javascript:;"><img src="./images/20.png" alt=""><span>全部</span></a></li>
            </ul></div>

        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
      </div>
    <!-- Swiper JS -->
  <script src="./js/swiper.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
        autoplay:true,
        pagination: {
        el: '.swiper-pagination',
        dynamicBullets: true,
      },
    });
  </script>
    <ul class="dibu">
        <li><img src="./images/底1.png" alt=""></li>
        <li><img src="./images/底2.png" alt=""></li>
        <li><img src="./images/底3.png" alt=""></li>
        <li><img src="./images/底4.png" alt=""></li>
        <li><img src="./images/底5.png" alt=""></li>
    </ul>
</html>